<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="static/index.css">
    <script type="text/javascript" src="static/qs.min.js"></script>
    <title>用户注册</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <style>
        body, html, #app {
            background: #00499e;
            height: 100%;
            width: 100%
        }
        .login-form {
            margin: auto;
            position: absolute;
            top: 50%;
            width: 85%;
            max-width: 400px;
            box-sizing: border-box;
            right: 0;
            left: 0;
            transform: translate(0, -50%);
            background: white;
            padding: 30px;
            border-radius: 4px;
            text-align: center;
        }

        .login-input {
            width: 100%;
        }

        .login-header {
            font-size: 20px;
            color: #666;
            text-align: center;
            padding: 0 20px 20px;
        }
        .login-btn {
            width: 100%;
            margin-top: 10px;
        }
    </style>
</head>

<body>
<div id="app">
    <el-form class="login-form" ref="form" label-width="0" label-position="right" :model="formData" :rules="rules">
        <div class="login-header">用 户 注 册</div>
        <el-form-item prop="username">
            <el-input v-model="formData.username" class="login-input" prefix-icon="el-icon-user" type="text"
                      placeholder="请输入用户名" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item prop="password">
            <el-input v-model="formData.password" class="login-input" prefix-icon="el-icon-lock" type="password"
                      @blur="passwordChange" placeholder="请输入密码" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item prop="passwordAG">
            <el-input v-model="formData.passwordAG" class="login-input" prefix-icon="el-icon-lock" type="password"
                      placeholder="二次确认密码" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item prop="phone">
            <el-input v-model="formData.phone" class="login-input" prefix-icon="el-icon-mobile-phone" type="phone"
                      placeholder="请输入手机号" maxlength="20"></el-input>
        </el-form-item>
        <el-button type="primary" class="login-btn" @click="register">注 册</el-button>
    </el-form>
</div>
</body>
<!-- import Vue before Element -->
<script src="static/vue.js"></script>
<!-- import JavaScript -->
<script src="static/index.js"></script>
<script src="static/axios.min.js"></script>
<script>
    var pageparm = getQueryString("pageparm");
    new Vue({
        el: '#app',
        data: function () {
            var that = this
            return {
                baseUrl: baseUrl,
                formData: {
                    username: '',
                    password: '',
                    passwordAG: '',
                    phone: ''
                },
                rules: {
                    username: [
                        {
                            required: true,
                            validator(filed, val, callback) {
                                if (!val) {
                                    callback(new Error('用户不能为空'))
                                }
                                callback()
                            },
                            trigger: 'blur'
                        }
                    ],
                    password: [
                        {
                            required: true,
                            validator(filed, val, callback) {
                                if (!val) {
                                    callback(new Error('密码不能为空'))
                                } else if (val.length < 6) {
                                    callback(new Error('密码不能少于6位'))
                                }
                                callback()
                            },
                            trigger: 'blur'
                        }
                    ],
                    passwordAG: [
                        {
                            required: true,
                            validator(filed, val, callback) {
                                if (!val) {
                                    callback(new Error('密码不能为空'))
                                } else if (val && that.formData.password !== val) {
                                    callback(new Error('两次输入的密码不相同'))
                                }
                                callback()
                            },
                            trigger: 'blur'
                        }
                    ],
                    phone: [
                        {
                            required: true,
                            validator(filed, val, callback) {
                                if (!val) {
                                    callback(new Error('手机号不能为空'))
                                }
                                callback()
                            },
                            trigger: 'blur'
                        }
                    ]
                }
            }
        },
        created() {
        },
        methods: {
            passwordChange () {
                this.$refs.form.validateField('passwordAG')
            },
            register () {
                var that = this
                this.$refs.form.validate(function (flag) {
                    if (flag) {
                        axios.get(that.baseUrl + 'PSJS/reguser', {
                            params: {
                                act: 'Add',
                                pzlusername: that.formData.username,
                                pzlpassword: that.formData.password,
                                Mphone: that.formData.phone
                            }
                        }).then(function (response) {
                            if (response.status === 200) {
                                if (response.data.succeed) {
                                    console.log(response)
                                    that.$message.success(response.data.xmsg)
                                    setTimeout(function () {
                                        location.href = './PSJSDETAI.html?register=true&type=add&pageparm=' + response.data.pzluserid
                                    }, 1000)
                                } else {
                                    that.$message.warning(response.data.xmsg)
                                }
                            } else {
                                that.$message.error('服务器故障！请联系管理员')
                            }
                        })
                    }
                })
            }
        }
    })

    function getQueryString(name) {
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        }
        return "";
    }
</script>

</html>